<template>
	<view class="index">
		<view style="height: 1rpx;">
			
		</view>
		<view v-for="(item,index) in cloudroom" :key="index" class="container">
			<view class="l1">
				{{item.name}}
			</view>
			<view class="l2">
				<view v-for="(item1,index) in cloudroom[index].sign" :key="index" class="sign">
					{{item1}}
				</view>
			</view>
			<view class="l3">
				<view v-for="(item2,index) in cloudroom[index].headicon" :key="index" class="headlist">
					<image v-if="item2":src="item2" mode="aspectFit" class="headicon"></image>
				</view>
				<view class="peoplenum">
					<!-- <image src="" mode="" class="numicon"></image> -->
					<text class="numtext">{{item.peoplenum}}人自习中</text>
				</view>
			</view>
		</view>
		<view style="height: 1rpx;">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cloudroom:[
					{
						name:"学习靠自己",
						sign:["日常学习","初二","河北"],
						headicon:["../../static/headicon/1.jpg","../../static/headicon/2.jpeg","../../static/headicon/3.jpg","../../static/headicon/4.jpg"],
						peoplenum:193
					},
					{
						name:"考研人来",
						sign:["考研","大四","四川"],
						headicon:["../../static/headicon/5.jpg","../../static/headicon/6.jpg","../../static/headicon/7.jpg","../../static/headicon/8.jpg"],
						peoplenum:103
					},
					{
						name:"为了考上大学学习吧",
						sign:["高中","湖南"],
						headicon:["../../static/headicon/1.jpg","../../static/headicon/2.jpeg","../../static/headicon/3.jpg","../../static/headicon/4.jpg"],
						peoplenum:60
					},{
						name:"学习靠自己",
						sign:["日常学习","初二","河北"],
						headicon:["../../static/headicon/1.jpg","../../static/headicon/2.jpeg","../../static/headicon/3.jpg","../../static/headicon/4.jpg"],
						peoplenum:193
					},
					{
						name:"考验人来",
						sign:["考研","大四","四川"],
						headicon:["../../static/headicon/1.jpg","../../static/headicon/2.jpeg","../../static/headicon/3.jpg","../../static/headicon/4.jpg"],
						peoplenum:103
					},
					{
						name:"为了考上大学学习吧",
						sign:["高中","湖南"],
						headicon:["../../static/headicon/1.jpg","../../static/headicon/2.jpeg","../../static/headicon/3.jpg","../../static/headicon/4.jpg"],
						peoplenum:60
					}
				]
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss">
	.index{
		background-color: #f0f0f0;
	}
	.container{
		padding: 50rpx 50rpx;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		background-color: #FFFFFF;
		margin-bottom: 40rpx;
		margin-top: 40rpx;
		
		display: flex;
		flex-direction: column;
		.l1 {
			font-size: 40rpx;
			font-weight: bold;
		}
		.l2{
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			gap: 15rpx;
			.sign{
				font-size: 26rpx;
				border: 1rpx solid #e6e6e6;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				background-color: #e6e6e6;
			}
		}
		.l3{
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			.headicon{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				border: 1px solid #FFFFFF;
				margin-left: -10rpx;
			}
			.peoplenum{
				display: flex;
				flex-direction: column;
				font-size: 26rpx;
				color: #ababab;
				margin-top: 40rpx;
				margin-left: 200rpx;
			}
		}
	}
</style>
